<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>个人中心</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/index.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.4.1.js"></script>
<script id="navTpl" type="text/html">
	<li><a href="">首页</a></li>
</script>
<script>
	window.onload = function() {
		var saveBtn = document.getElementById("save");
		//获取收件人名
		var accept = document.getElementById("accept");
		//获取街道名
		var address = document.getElementById("address");
		//获取手机号码
		var telphone = document.getElementById("telphone");
		
		var acceptVal;
		var addressVal;
		var telphoneVal;
		
		saveBtn.onclick = function() {
			//收件人姓名
			acceptVal = accept.value;
			//街道地址address
			addressVal = address.value;
			//手机号码telphone
			telphoneVal = telphone.value;
			
			//获得省份
			var index = document.getElementById("prov").selectedIndex;//获取当前选择项的索引.
            document.getElementById("prov").options[index].innerHTML;//获取当前选择项的文本.
            var obj = document.getElementById("prov");
            for (i = 0; i < obj.length; i++) {//下拉框的长度就是它的选项数.
                if (obj[i].selected == true) {
                    var province = obj[i].text;//获取当前选择项的文本.
                    
                }
            }
            
            //获取市
			var index = document.getElementById("city").selectedIndex;//获取当前选择项的索引.
            document.getElementById("city").options[index].innerHTML;//获取当前选择项的文本.
            var obj = document.getElementById("city");
            for (i = 0; i < obj.length; i++) {//下拉框的长度就是它的选项数.
                if (obj[i].selected == true) {
                    var city = obj[i].text;//获取当前选择项的文本.
                    
                }
            }
            
            //获取区
			var index = document.getElementById("country").selectedIndex;//获取当前选择项的索引.
            document.getElementById("country").options[index].innerHTML;//获取当前选择项的文本.
            var obj = document.getElementById("country");
            for (i = 0; i < obj.length; i++) {//下拉框的长度就是它的选项数.
                if (obj[i].selected == true) {
                    var country = obj[i].text;//获取当前选择项的文本.
                    
                }
            }
            
            var checked = document.getElementById("type").checked;
            var type = 0;//复选框的状态
            if(checked == true){
            	type = 1;
            }
            
			//发送ajax，需要加入正则判断
			$.post("${pageContext.request.contextPath}/personal/addressMana", "accept="+acceptVal+"&province="+province+"&city="+city+"&country="+country+"&address="+addressVal+"&telphone="+telphoneVal+"&type="+type, function(data){
				document.getElementById("addressdata").innerHTML += '<tr>'+
															            '<td>'+data.accept+'</td>'+
															            '<td>'+data.province +data.city +'</td>'+
															            '<td>'+data.area+ data.address +'</td>'+
															            '<td>'+data.telphone +'</td>'+
															            '<td>'+'<a class="blue" href="javascript:void(0)" onclick="update(1)">'+"修改"+'</a>'+'|'+ "默认地址"+'</td>'+
															        '</tr>';
			}, "json");
		}
	}
</script>
</head>
<body class="index">
	<div class="ucenter container">
		<div class="header" id="header">
			<h1 class="logo">
				<a title="" style="background: url(${pageContext.request.contextPath }/images/logo.png)" href="index.html">电子商务平台</a>
			</h1>
		<ul class="shortcut"><li class="first"><a href="${pageContext.request.contextPath }/personal/center">个人中心</a></li><li><a href="${pageContext.request.contextPath }/personal/myOrders">我的订单</a></li></ul><p class="loginfo">你好!${user.username }[<a href="javaScript:logout()">安全退出</a>]</p></div>
		<div class="navbar" style="margin-bottom: 50px">
			<ul id="navbarUl">

			</ul>
			<div class="mycart">
				<dl>
					<dt>
						<a href="cart.html">购物车<b name="mycart_nums" id="mycart_nums">2</b>件
						</a>
					</dt>
					<dd>
						<a href="cart.html">去结算</a>
					</dd>
				</dl>
				<!--购物车浮动div 开始-->
				<div class="shopping" id="div_mycart" style="display: none;">
					<dl class="cartlist" id="shopcarDiv">
					</dl>
				</div>
				<script>
					
				</script>
			</div>
		</div>
		
		<div class="wrapper clearfix">
			<div class="sidebar f_l">
				<img src="${pageContext.request.contextPath }/images/front/ucenter/ucenter.gif" width="180" height="40">
				<div class="box">
					<div class="title">
						<h2>交易记录</h2>
					</div>
					<div class="cont">
						<ul class="list">
							<li><a href="${pageContext.request.contextPath }/personal/myOrders" class="menu">我的订单</a></li>
						</ul>
					</div>
				</div>
				<div class="box">
					<div class="title">
						<h2 class="bg5">个人设置</h2>
					</div>
					<div class="cont">
						<ul class="list">
							<li><a href="" class="menu">地址管理</a></li>
						</ul>
						<ul class="list">
							<li><a href="${pageContext.request.contextPath }/personal/avatar" class="menu">修改头像</a></li>
						</ul>
						<ul class="list">
							<li><a href="${pageContext.request.contextPath }/personal/update" class="menu">修改密码</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="main f_r" id="main">
				<div class="tabs">
					<div class="uc_title m_10 tabs_menu">
						<label class="current node"><span>地址管理</span></label>
					</div>
					<div class="tabs_content">
						<div id="address_list" class="form_content m_10 node">
							<div class="uc_title2 m_10">
								<strong>已保存的有效地址</strong>
							</div>
							<table class="list_table" width="100%" cellpadding="0" cellspacing="0">
								<colgroup>
									<col width="120px">
									<col width="120px">
									<col width="240px">
									<col width="120px">
									<col width="150px">
									<col>
								</colgroup>
								<thead>
									<tr>
										<th>收货人</th>
										<th>所在地区</th>
										<th>街道地址</th>
										<th>手机</th>
										<th>操作</th>
									</tr>
								</thead>
								
								  <tbody id="addressdata">
								  	<c:forEach items="${adrressList }" var="address">
								        <tr>
								            <td>${address.accept }</td>
								            <td>${address.province } ${address.city }</td>
								            <td>${address.area } ${address.address }</td>
								            <td>${address.telphone }</td>
								            <td><a class="blue" href="javascript:void(0)" onclick="update(1)">修改</a>| 默认地址</td>
								        </tr>
								  	</c:forEach>
							    </tbody>
							</table>
						</div>
					</div>
				</div>
				<!--表单修改-->
				<div class="orange_box" id="address_form">
					<input type="hidden" id="id" value="">
					<table class="form_table" width="100%" cellpadding="0" cellspacing="0">
						<colgroup>
							<col width="120px">
							<col>
						</colgroup>
						<caption>收货地址</caption>
						<tbody>
							<tr>
								<th><span class="red">*</span> 收货人姓名：</th>
								<td><input id="accept" class="normal" type="text"><label>收货人真实姓名，方便快递公司联系。</label></td>
							</tr>
							<tr>
								<th>
									<span class="red">*</span> 所在地区：
								</th>
								<td>
								    <!-- <fieldset style="display: inline-block; border: none;"> -->
								        <!-- <form action="#"> -->
								            <label for="addr-show">
								                <input type="hidden" value="" id="addr-show">
								            </label>
								 
								            <!--省份选择-->
								            <select id="prov" onchange="showCity(this)">
								                <option>省份</option>
								            </select>
								 
								            <!--城市选择-->
								            <select id="city" onchange="showCountry(this)">
								                <option>城市</option>
								            </select>
								 
								            <!--县区选择-->
								            <select id="country" onchange="selecCountry(this)">
								                <option>县区</option>
								            </select>
								            <button type="button" class="btn met1" onClick="showAddr()" id="button-show" style="display: none;">确定</button>
								        <!-- </form> -->
								    <!-- </fieldset> -->
								</td>
							</tr>
							<tr>
								<th><span class="red">*</span> 街道地址：</th>
								<td><input name="address" id="address" class="normal" type="text"><label>真实详细收货地址，方便快递公司联系。</label></td>
							</tr>
							<tr>
								<th>手机号码：</th>
								<td><input name="telphone" id="telphone" class="normal" type="text"><label>手机号码，如：13588888888</label></td>
							</tr>
							<tr>
								<th>设为默认：</th>
								<td><label><input name="type" id="type" type="checkbox" value="y"></label></td>
							</tr>
							<tr>
								<th></th>
								<td><label class="btn"><input type="button" id="save" value="保存"></label> <label class="btn"><input type="button" id="cancel" value="取消"></label></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="help m_10">
			<div class="cont clearfix">
				<dl>
					<dt>
						<a href="">购物指南</a>
					</dt>
					<dd>
						<a href="">订单状态</a>
					</dd>
					<dd>
						<a href="">购物流程</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">支付帮助</a>
					</dt>
					<dd>
						<a href="">支付帮助</a>
					</dd>
					<dd>
						<a href="">在线支付</a>
					</dd>
					<dd>
						<a href="">货到付款</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">配送帮助</a>
					</dt>
					<dd>
						<a href="">EMS/邮政普包</a>
					</dd>
					<dd>
						<a href="">商品验货与签收</a>
					</dd>
					<dd>
						<a href="">配送范围及运费</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">售后服务</a>
					</dt>
					<dd>
						<a href="">售后服务</a>
					</dd>
					<dd>
						<a href="">发票制度</a>
					</dd>
					<dd>
						<a href="">退货说明</a>
					</dd>
					<dd>
						<a href="">换货说明</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="">帮助信息</a>
					</dt>
					<dd>
						<a href="">友情链接</a>
					</dd>
					<dd>
						<a href="">联系客服</a>
					</dd>
					<dd>
						<a href="">找回密码</a>
					</dd>
					<dd>
						<a href="">关于我们</a>
					</dd>
				</dl>
			</div>
		</div>
		<div class="footer">
			<p class="links">
				<a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
			</p>
			Copyright © 2015-2021 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
		</div>
	</div>
	
		
<script src="${pageContext.request.contextPath }/js/city.js"></script>
<script src="${pageContext.request.contextPath }/js/method.js"></script>
</body></html>